
<template>
  <div class="project-main-box">
    <div ref="headBar" style="overflow: visible" :style="{ height: divHeight  + 'px', transition: 'height 0.5s' }">
      <div class="head-bar">
        <span class="head-title">
          <span @click="clickBacktoMain" class="click-back">返回借鬼镇测试主页/</span>
          <span style="font-weight: normal">id={{this.$route.query.project}}</span>
        </span>
        <span class="head-button-box">
          <el-upload style="float: right;margin-right: 20px" class="upload-demo" ref="upload" accept=".xlsx" :action="UploadUrl()" :on-preview="handlePreview"
                     :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :on-success="handleUploadSuccess">
             <el-button slot="trigger" class="head-button" round type="primary">选择文案EXCEL</el-button>
             <el-button class="head-button" type="success" round @click="submitUpload">上传</el-button>
          </el-upload>
          <el-button type="primary"  size="medium" round class="head-button" @click="pushJson(0)">导出Json文件</el-button>
          <el-button type="primary"  size="medium" round class="head-button" @click="pushJson(1)">发布</el-button>
        </span>
      </div>
    </div>
    <!--  main身体主要框  -->
    <div class="main-box-body" v-if="loaded">
      <el-tabs v-model="activeTab" @tab-click="changeTabs">
        
            <el-tab-pane label="form模块"  name="from-try" class="tab-box">
                <!-- 内容盒子，建议放组件  -->
                <div class="tab-item-tab-box" v-if="activeTab==='from-try'" ref="tabItemBox">
                    <from-try></from-try>
                </div>
            </el-tab-pane>
          
             
      </el-tabs>
    </div>
  </div>
</template>

<script> 
import bus from "../common/bus";

import fromTry from "./inline/from-try.vue";

export default {
  name: "index",
  components: {fromTry},
  data(){
    return {
      loaded: false, //主页显示
      activeTab: 'from-try', //加载的tab
      divHeight: 60, //头部导航栏的动态增减
      fileList: [], //文件列表

      searchValue: 'searchValue/remark', //搜索值
      changeRow: {}, //改变时显现保存
      tableList: [{id:0,remark:'remark0',goods:'[1,2,3]'},{id:1,remark:'remark1',goods:'[1,2,3]'}],
      formData: {},
      //校验规则
      rules: {},

      itemData: {
        tableList: [
          {proj:0,remark:'remark0',goods:[{a:[0,1,1]},{a:[0,1,1]}]},
          {proj:1,remark:'remark1',goods:[{a:[0,1,1]},{a:[0,1,2]},{a:[0,1,3]}]},
          {proj:2,remark:'remark2',goods:[{a:[0,1,11]},{a:[0,1,22]}]}],
      },
    }
  },
  mounted() {
    // const myDiv = this.$refs.tabItemBox;
    // myDiv.addEventListener('wheel', this.handleWheel);
  },
  beforeDestroy() {
    //添加页面滚动监听
    // const myDiv = this.$refs.tabItemBox;
    // myDiv.removeEventListener('wheel', this.handleWheel);


    //取消监听tab切换改变
    //取消监听重绘页面
    //取消监听init页面
    bus.$off('change-tab', this.busChangeTab);
    bus.$off('reload-page', this.busReloadPage);
    bus.$off('init-page', this.busInitPage);
  },
  async created() {
    //监听tab切换改变
    bus.$on('change-tab', this.busChangeTab)
    //监听重绘页面
    bus.$on('reload-page', this.busReloadPage)
    //监听init页面
    bus.$on('init-page', this.busInitPage)
    //监听页面滚动
    bus.$on('handle-wheel', this.busHandleWheel)

    await this.initAll()
  },
  methods:{
    //定义事件监听的事件
    //切换tab 、重绘页面 、重载页面
    busChangeTab(params){
      console.log('change-tab',params)
      if (params.tabIndex !== undefined) this.activeTab = params.tabIndex
    },
    busReloadPage(params){
      console.log('reload-page',params)
      if (params.tabIndex !== undefined) this.activeTab = params.tabIndex
    },
    busInitPage(params){
      console.log('init-page',params)
      if (params.tabIndex !== undefined) this.activeTab = params.tabIndex
    },
    busHandleWheel(params){
      console.log('handle-wheel',params)
      let event = params.event

      const myDiv = this.$refs.headBar;
      if (event.deltaY > 0) {
        this.divHeight = 0;
        myDiv.style.overflow = 'hidden';

      } else {
        this.divHeight = 60;
        myDiv.style.overflow = 'visible';
      }

      console.log('handleScroll----------------')
      const tabItemBox = this.$refs.tabItemBox ;
      if (event.deltaY > 0) {
        if(tabItemBox) tabItemBox.style.height = 'calc(100vh - 175px)';

      } else {
        tabItemBox.style.height = 'calc(100vh - 235px)';
      }
    },


    //返回主页
    clickBacktoMain(){
      this.$router.push({
        path: "/gui_zhen"
      });
    },
    //重新启动监听
    reloadListen(){
      this.$nextTick(() => {
        // 在DOM更新后执行回调函数
        // this.divHeight = 200;
        const myDiv = this.$refs.tabItemBox;
        myDiv.removeEventListener('wheel', this.handleWheel);
        myDiv.addEventListener('wheel', this.handleWheel);
      });
    },
    //监听滚动事件
    handleWheel(event) {
      console.log('handleScroll')
      const myDiv = this.$refs.headBar;
      const tabItemBox = this.$refs.tabItemBox;
      if (event.deltaY > 0) {
        this.divHeight = 0;
        myDiv.style.overflow = 'hidden';
        if(tabItemBox) tabItemBox.style.height = 'calc(100vh - 175px)';

      } else {
        this.divHeight = 60;
        myDiv.style.overflow = 'visible';
        tabItemBox.style.height = 'calc(100vh - 235px)';
      }
    },
    //tabs切换事件
    changeTabs(tab){
      console.log('changeTabs,选中的实例',tab);
      let event = {}
      event.deltaY = -20
      this.$nextTick(() => {
        this.handleWheel(event);//设置head-bar恢复默认高度
      })
      this.reloadListen();
    },
    //滚动置顶通用操作
    scrollToTop() {
      this.$refs.tabItemBox.scrollIntoView({ behavior: 'smooth', block: 'start' });
      // this.$refs.tabItemBox.scrollIntoView({ behavior: 'smooth', block: 'start' });
    },
    //上传文件
    UploadUrl() {
      return this.$message.error("请完成后端代码并完善前端逻辑")
      return this.$settings.HOST + "/upload/gui_zhen_proj"
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.$message.success('re ok')
    },
    async handleUploadSuccess() {
      this.$message({
        type: 'success',
        message: '上传成功'
      });
      // await this.initDta()
    },
    submitUpload() {
      this.$refs.upload.submit()
      this.$message.success('ok')
    },
    handlePreview(file) {
      console.log(file);
    },
    //发布和导出 TODO:
    pushJson(is_push){
      if (is_push == 0) {
        window.location.href = this.$settings.HOST + "/gui_zhen_action/" + is_push
      } else {
        this.axios.get(this.$settings.HOST + "/gui_zhen_down_action/" + is_push)
            .then(response => {
              this.$message({
                message: '上传成功',
                type: 'success',
                showClose: true,
                offset: 300
              });
            }).catch(function(error) { // 请求失败处理
          console.log(error);
        });
      }
    },

    //初始化
    async initAll(){
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.loaded = false

      //获取列表 TODO:
      // await this.getReward()
      // await this.getBonusList()
      //获取数据 TODO:
      // await this.getProjectList()
      await this.getProject()

      this.$nextTick(() => {
        this.loaded = true
      })
      // this.loaded = true
      loading.close();
      this.reloadListen();
    },
    //获取单项数据
    async getProject(){
      let param = {
        action:'get_item_method',
        "project":this.$route.query.project
      }
      let { data:res } = await this.axios.post(this.$settings.HOST + '/gui_zhen_action',param)
      if(res.status == 200){
        this.$message.success('load data success')
        this.itemData = res.data
        // this.$store.state.itemData = this.itemData
        await this.$store.commit('update',['itemData',res.data ])
        this.$store.state.itemData = this.itemData
        this.loaded = true
        this.$nextTick(() => {
          //table表单在第一页时需要顾及排序
          // this.setSort()
        })
      }else {
        this.$message.error(`数据加载失败：${res.info}`)
      }
    },
    //获取数据列表
    async getProjectList(){
      let param = {
        "action": "get_list_method"
      }
      let { data:res } = await this.axios.post(this.$settings.HOST + '/gui_zhen_action',param)
      if(res.status == 200){
        this.$message.success('Load Data Success')
        this.tableList = res.data
      }else {
        this.$message.error(`${res.info}`)
      }
    },

    //获取奖励list
    async getReward(){
      let query = {}
      query.action = "get_proj_list"
      const res = await this.axios.get(this.$settings.HOST + '/reward_type_list/')
      if (res.data.data === undefined){
        this.$store.commit('update',['rewardList',res.data])
      }else {
        this.$store.commit('update',['rewardList',res.data.data])
      }
      this.reward_type_list = res.data.data
      console.log('rewardList:',res.data.data)
    },
    async getBonusList(){
      let query = {}
      const res = await this.axios.get(this.$settings.HOST + '/bonusList/')
      this.$store.commit('update',['bonusList',res.data])
      this.bonusList = res.data
      console.log('bonusList:',res.data)
    },
  }
}
</script>

<style scoped>
/*非侵入修改主题*/
html{
  background-color: #F5F7FA;
  height: 100vh;
}
body{
  margin: 0px!important;
}
/*tab样式*/
>>>  .el-tabs__nav-wrap::after{
  height: 0px!important;
  /*margin-left: 10px!important;*/
}
.el-main::-webkit-scrollbar {
  display: none;
}
.el-aside{
  width: 230px!important;
}
.el-main {
  padding: 10px 0 0 0!important;
}
.el-container >>  .el-main{
  padding: 10px 0 0 0;
  background-color: #F5F7FA;
  height: calc(99vh - 65px) !important;
  width: calc(99% - 10px);
  overflow-x: hidden;
  /*overflow-y: hidden*/
}
.el-header {
  background-color: rgb(186 230 253);
  /*background-color: #B3C0D1;*/
  color: #333;
  line-height: 80px;
}

/*主框架内容*/
.project-main-box{
  position: fixed;
  top: 60px;
  right: 0px;
  background-color: #F5F7FA;
  width: calc(97% - 170px);
  height: calc(100% - 60px);
  /*position: relative;*/
  padding: 20px;
  padding-top: 5px;
  /*overflow: auto;*/
}
/*头部bar*/
.head-bar{
  position: sticky;
  top: 10px;
  display: flex;
  width: calc(100% - 30px);
  padding: 5px 10px 5px 20px;
  border-radius: 10px;
  background-color: white;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  border: 1px solid #F5F7FA;
  box-shadow:  2px 2px 5px 5px  rgba(219, 219, 219, 0.5);
}
.head-title{
  font-size: larger;
  font-weight: bolder;
  font-family: '微软雅黑';
}
.head-button-box{
  display: flex;
  justify-content: right;
}
.head-button{
  padding: 10px 30px 10px 30px!important;
  min-width: 80px;
  margin-right: 10px
}

.click-back:hover{
  cursor: pointer;
}

/*身体部分*/
.main-box-body{
  width: 100%;
  /*margin-top: 50px;*/
  background-color: #F5F7FA;
  margin-top: 10px;
  /*padding: 10px 10px 10px 20px;*/
  border-radius: 10px;
  max-height: calc(100vh - 205px);
}
/*tab样式*/
.el-tabs__content{
  overflow: visible!important;
}
.el-tabs__nav{
  padding-left: 10px!important;
}
.el-tabs__active-bar{
  padding-left: 20px!important;
}
.el-tabs__nav-wrap::after{
  height: 0px!important;
  /*margin-left: 10px!important;*/
}
.el-tabs__content{
  top : -8px;
}
.el-tabs{
  position: relative;
}
.tab-box{
  background-color: #ffffff;
  padding: 10px;
  border-radius: 10px;
  position: relative;
  /*max-height: calc(100vh - 200px);*/
  box-shadow: 2px 2px 5px 5px rgba(219, 219, 219, 0.5);
}
.item-head-button{
  padding: 8px 20px 8px 20px!important;
  min-width: 80px;
  margin-right: 9px
}


/*每一个tab项的*/
.tab-item-box{
  overflow: auto;
  position: relative;
  height: calc(100vh - 225px);
}
.tab-item-head{
  position: sticky;
  top: 0;
  min-height: 30px;
  display: flex;
  justify-content: space-between;
  margin: 0 0 10px 0;
  /*background-color: rgba(0, 255, 149, 0.1);*/
  box-shadow: 0px 10px 10px white;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.8);
}
.tab-item-left{
  display: flex;
}
.tab-item-right{

}
.tab-item-body{
  margin-top: 20px;
  position: relative;
  /*background-color: #409EFF;*/
  /*height: 150vh;*/
}

/*模块通用操作*/
.scroll-top{
  padding: 4px;
  height: 20px;
  width: 20px;
  line-height: 20px;
  border-radius: 5px;
  background-color: #f2f5f6;
  box-shadow: 0 0 3px 2px rgba(25,137,250, .1);
  text-align: center;
  color: #1989fa;
  position: sticky;
  float: right;
  right: 4px;
  bottom: 4px;
  border: 1px solid #cae4fd;
  opacity: 0.9;
}
.scroll-top:hover{
  cursor: pointer;
}

/*其他系统ui-css*/
/*按钮设置*/
.ly-mini-button{
  padding: 8px!important;
}
</style>
